<template>
  <div>
    <el-row style="background-color: #ebdede;">
      <el-col :span="22" :offset="1">
        <div class="b01">
          <div class="b011">老铁推荐</div>
          <div class="b012">根据你喜欢的内容推荐</div>
          <div class="b013" v-if="zhucestatus">
            <span @click="registryAnchor()" v-show="false">成为主播</span>
            <!---->
            <el-button type="text" @click="dialogFormVisible = true">注册成为主播</el-button>

            <!--弹框-->
            <el-dialog title="注册成为主播" :visible.sync="dialogFormVisible" >
              <!--表单-->
              <el-form :model="tbAnchor">
                <el-form-item label="主播名称" :label-width="formLabelWidth">
                  <el-input v-model="tbAnchor.aName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="直播间标题" :label-width="formLabelWidth">
                  <el-input v-model="tbAnchor.aTitle" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="主播称号" :label-width="formLabelWidth">
                  <el-input v-model="tbAnchor.aChenghao" autocomplete="off"></el-input>
                </el-form-item>
                <!--下拉框-->
                选择你的直播类型
                <el-select v-model="tbAnchor.aTid" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <!--上传图片-->
                <div>头像上传</div>
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:7000/live-live/anchor/upload01"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                封面上传
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:7000/live-live/anchor/upload01"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess01"
                  :before-upload="beforeAvatarUpload01">
                  <img v-if="imgurl" :src="imgurl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false,registryAnchor()">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>

        <div class="b02">
          <!--<div class="a021" v-for="b in anchorlist1">-->
            <!--<div class="a0211">-->
              <!--<img class="imgaa" :src="b.aFengmian"/>-->
            <!--</div>-->
            <!--<div class="a0212">-->
              <!--<div class="a02121"></div>-->
              <!--<div class="a02122">-->
                <!--<div class="a021221">-->
                  <!--<div class="a0212211" ></div>-->
                <!--</div>-->
                <!--<div class="a021222">-->
                  <!--<div class="a0212221"></div>-->
                <!--</div>-->
              <!--</div>-->
            <!--</div>-->
          <!--</div>-->
          <div class="b021" v-for="b in anchorlist1">
            <div class="b0211">
              <img @click="toplay(b.aId)" class="imgaa" :src="b.aFengmian" style="cursor: pointer"/>
            </div>
            <div class="b0212">
              <div class="b02121">
                {{b.aTitle}}
              </div>
              <div class="b02122">
                <div class="b021221">
                  <div class="b0212211" >
                    <img  style="width: 100%;height: 100%;border-radius: 50%;margin-top: -6px;" :src="b.aPic"/>
                  </div>
                </div>
                <div class="b021222">
                  <div class="b0212221">
                    {{b.aName}}
                  </div>
                  <div class="b0212222">
                    <div class="b02122221">
                      <img style="width: 100%;height: 100%" src="../assets/redu.png"/>
                    </div>
                    <div class="b02122222">{{b.aRedu}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="b03">
          <div class="b031z">在线直播</div>
          <div class="b032">只有你想不到，没有我们找不到！</div>
          <div class="b033"></div>
        </div>

        <div class="b02">
          <div class="b021" v-for="a in anchorlist">
            <div class="b0211">
              <img @click="toplay(a.aId)" class="imgaa" :src="a.aFengmian" style="cursor: pointer"/>
            </div>
            <div class="b0212">
              <div class="b02121">
                {{a.aTitle}}
              </div>
              <div class="b02122">
                <div class="b021221">
                  <div class="b0212211" >
                    <img @click="toplay(a.aId)" style="width: 100%;height: 100%;border-radius: 50%;margin-top: -6px;" :src="a.aPic"/>
                  </div>
                </div>
                <div class="b021222">
                  <div class="b0212221">
                    {{a.aName}}
                  </div>
                  <div class="b0212222">
                    <div class="b02122221">
                      <img style="width: 100%;height: 100%" src="../assets/redu.png"/>
                    </div>
                    <div class="b02122222">{{a.aRedu}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="background-color: #ebdede;">
      <el-col>
        <div class="b04">
          <img style="width:100%;height: 500px" src="http://qmgk0uvzn.hn-bkt.clouddn.com/QQ%E5%9B%BE%E7%89%8720210105191550.png"/>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>

  import  axios from 'axios'
    export default {
        name: "zhibohome",
      data(){
          return{
            zhucestatus:true,
            imageUrl: '',
            imgurl:'',
            anchorlist:[],
            anchorlist1:[],
            dialogTableVisible: false,
            dialogFormVisible: false,
            tbAnchor: {
              aName:'',
              aTitle:'',
              aChenghao:'',
              aFengmian:'',
              aPic:'',
              atId:''
            },
            formLabelWidth: '120px',
            options: [{
              value: '1',
              label: '地下城与勇士'
            }, {
              value: '2',
              label: '英雄联盟'
            }, {
              value: '3',
              label: '绝地求生'
            }, {
              value: '4',
              label: '唠嗑'
            }, {
              value: '5',
              label: '音乐'
            }],
          }
      },
      methods:{

        open() {
          if(this.$cookie.get("token")==null){

          }
          this.$alert('', '标题名称', {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `action: ${ action }`
              });
            }
          });
        },
        //注册主播
        registryAnchor(){
          alert(this.tbAnchor.aTid)
          axios.post("http://localhost:7000/live-user/user/registryAnchor",this.tbAnchor).then(res=>{
            console.log(res.data.code)
            if(res.data.code==200){
              alert(res.data.message)
            }else {
              alert(res.data.message)
              }
          })
        },
        toplay(aId){
          this.$router.push({name:'zhibo',query:{aId:aId}})
        },
        findAnchorByLimit(page,size){
          axios.post("http://localhost:7000/live-live/anchor/findAnchorByLimit",{page:page,size:size}).then(res=>{
            if(res.data.code==200){
              console.log(res.data.data)
              this.anchorlist=res.data.data
            }
          })
        },
        findAnchorByLimitTop(page,size){
          axios.post("http://localhost:7000/live-live/anchor/findAnchorByLimit",{page:page,size:size}).then(res=>{
            if(res.data.code==200){
              console.log(res.data.data)
              this.anchorlist1=res.data.data
            }
          })
        },
        handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
          this.tbAnchor.aPic=res.data
          alert(this.tbAnchor.aPic)
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        handleAvatarSuccess01(res, file) {
          this.imgurl = URL.createObjectURL(file.raw);
          console.log(this.imgurl)
          this.tbAnchor.aFengmian=res.data
          alert(this.tbAnchor.aFengmian)
        },
        beforeAvatarUpload01(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        }
      },
      mounted(){
          this.findAnchorByLimit(0,11)
          this.findAnchorByLimitTop(11,16)
        if(this.$cookie.get("token")==null){
          this.zhucestatus=false
        }
      }
    }
</script>

<style >
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-select>.el-input{
    height: 120px;
  }
  .el-dialog__header{
    height: 100px;
  }
  .el-button--text{
    float: left;
    margin-top: 82px;
    font-size: 25px;
  }
  .el-button{
  margin-top: 110px;
  }
  .b013{
    float: left;
    width: 200px;
    height: 100%;
    text-align: center;
    line-height: 196px;
    margin-left: 1198px;
    color: #314823;
  }
  .b033{
    width: 84%;
    float: left;
  }
  .b04{
    width: 100%;
    height: 200px;
    background-color: red;
    margin-top: 20px;
  }
  .imgaa{
    width: 100%;
    height: 100%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
  .b0212211{
    width: 60px;
    height: 60px;
    /*background-color: aqua;*/
    border-radius: 50%;
    margin: auto;
  }
  .b0212221{
    width: 95%;
    height: 30px;
    /*background-color: pink;*/
    margin-top: 3px;
    /*text-align: center;*/
  }
  .b02122221{
    width: 24px;
    height: 20px;
    /*background-color: red;*/
    float: left;
    margin-left: 10px;
  }
  .b02122222{
    width: 107px;
    height: 20px;
    /*background-color: #e3d3d3;*/
    margin-left: 43px;
  }
  .b0212222{
    width: 150px;
    height: 20px;
    /*background-color: yellow;*/
    margin-top: 4px;
  }
  .b021222{
    width: 60%;
    height: 100%;
    /*background-color: aqua;*/
    float: left;
    border-bottom-right-radius: 20px;
  }
  .b021221{
    width: 35%;
    height: 100%;
    border-bottom-left-radius: 20px;
    /*background-color: yellow;*/
    float: left;
    margin-left: 5%;
  }
  .b02121{
    width: 100%;
    height: 30px;
    /*background: green;*/
    text-align: center;
  }
  .b02122{
    width: 100%;
    height: 58px;
    /*background-color: pink;*/
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  .b0212{
    width: 100%;
    height: 35%;
    /*background-color: #d5cedc;*/
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  .b0211{
    width: 100%;
    height: 65%;
    /*background-color: #b17272;*/
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
  .b032{
    float: left;
    width: 267px;
    height: 100%;
    font-size: 17px;
    text-align: center;
    line-height: 197px;
    margin-left: 0px;
    font-family: cursive;
    margin-top: 16px;
    float: left;
  }
  .b031z{
    width: 200px;
    height: 100%;
    /*background-color: aquamarine;*/
    text-align: center;
    line-height: 126px;
    font-size: 40px;
    float: left;
    font-family: cursive;
    margin-top: 32px;
    margin-left: 0px;
  }
  .b03{
    width: 100%;
    height: 118px;
    /*background-color: #dfd0d0;*/
    margin-top: 0px;
    float: left;
  }
  .b021{
    width: 300px;
    height: 250px;
    background-color: white;
    border-radius: 20px;
    margin-left: 58px;
    float: left;
    margin-top: 20px;
  }
  .b02{
    width: 100%;
    background-color: gainsboro;
    margin-top: 50px;
  }
  .b012{
    float: left;
    width: 200px;
    height: 100%;
    font-size: 17px;
    text-align: center;
    line-height: 197px;
    margin-left: 25px;
    font-family: cursive;
    float: left;
  }
  .b011{
    width: 200px;
    height: 100%;
    /*background-color: aquamarine;*/
    text-align: center;
    line-height: 126px;
    font-size: 40px;
    float: left;
    font-family: cursive;
  }
.b01{
  width: 100%;
  height: 118px;
  /*background-color: #dfd0d0;*/
}
</style>
